import React, { Component } from 'react';
import {Range,Label,Badge,CheckBox } from 'iftide'

import {
    StyleSheet,
    View,
    Text,
    TextInput,
    Image,
    Dimensions
    } from 'react-native';

export default class Range_Demo extends Component{
    constructor(props) {
        super(props);
        this.state={
            rangeType:'2',
            multiSliderValue: [20,79],
            minValue:0,
            maxValue:100,
            trackStyle:{backgroundColor:'#d8d8d8'},
            selectedStyle:{backgroundColor:'#13b6ff'},
        }
    }

    onValuesChangeFinish=(value)=>{
        console.log(value)
    }

    customMarkerLeft=()=>{
        return (
            <View style={{width:30,height:30,borderRadius:30,borderWidth:1,borderColor:'black',backgroundColor:'white'}}>
                <View style={{width:12,height:12,borderRadius:12,backgroundColor:'#777',position:"absolute",top:8,left:8}}/>
            </View>
        )
    }

    customMarkerRight=()=>{
        return (
            <View style={{width:30,height:30,borderRadius:30,borderWidth:1,borderColor:'black',backgroundColor:'white'}}>
                <View style={{width:12,height:12,borderRadius:12,backgroundColor:'#777',position:"absolute",top:8,left:8}}/>
            </View>
        )
    }

    render(){
        let {rangeType,multiSliderValue,minValue,maxValue,trackStyle,selectedStyle,markerStyle}=this.state;
        let range={
            rangeType:rangeType,
            multiSliderValue:multiSliderValue,
            minValue:minValue,
            maxValue:maxValue,
            trackStyle:trackStyle,
            selectedStyle:selectedStyle,
            step:5,
            sliderWidth:Dimensions.get('window').width*0.9,
            customMarkerRight:this.customMarkerRight,
            customMarkerLeft:this.customMarkerLeft,
            onValuesChangeFinish:this.onValuesChangeFinish
        }
        
        let that=this;

        return (
            <View style={{flex:1,alignItems:'center'}}>
                <Range {...range} ref="range"/>
                <View style={styles.wrap}>
                    <Image source={require('./Icon.png')}   style={styles.imgStyle} />
                    <View style={styles.leftContainer}>
                        <View style={styles.viewStyle}>
                            <Label text = '特约商户支付特约商户支付' type={'form'} numberOfLines={1} labelStyle={{width:100,marginRight:15}}/>
                            <Badge backgroundColor={'red'} text={'分'} fontSize={12} defaultWidth={24}/>
                            <Badge backgroundColor={'green'} text={'积'} fontSize={12} defaultWidth={24}/>
                            <Badge backgroundColor={'blue'} text={'闪'} fontSize={12} defaultWidth={24}/>
                            <Badge backgroundColor={'red'} text={'分'} fontSize={12} defaultWidth={24}/>
                            <Badge backgroundColor={'green'} text={'积'} fontSize={12} defaultWidth={24}/>
                            <Badge backgroundColor={'blue'} text={'闪'} fontSize={12} defaultWidth={24}/>
                            <Badge backgroundColor={'blue'} text={'闪'} fontSize={12} defaultWidth={24}/>
                        </View>
                        <View style={styles.viewStyle}>
                            <View style={{flex:1,flexDirection:'row'}}>
                                <Image source={require('./star-selected.png')}   style={{width:16,height:16}} />
                                <Image source={require('./star-selected.png')}   style={{width:16,height:16}} />
                                <Image source={require('./star-selected.png')}   style={{width:16,height:16}} />
                                <Image source={require('./star-selected.png')}   style={{width:16,height:16}} />
                            </View>
                            <Label text = '713元/人' type={'form'} numberOfLines={1} />
                        </View>
                        <View style={styles.desc}>
                            <Label text = '回龙观/天通苑/小汤山  汽车销售' type={'form'} numberOfLines={1} labelStyle={{width:200,marginRight:15}}/>
                        </View>
                    </View>
                </View>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        height: '100%',
        flex:1
    },
    wrap: {
        flexDirection: 'row',
        backgroundColor: 'white',
        paddingLeft: 13,
        paddingRight: 13,
        alignItems: 'center',
        justifyContent:'center'
    },
    imgStyle:{
        width:100,
        height:100,
        marginRight:10
    },
    leftContainer:{
        flex:1,
        height:100
    },
    viewStyle:{
        flexDirection: 'row',
        height:40,
        alignItems:'center'
    },
    desc:{
        height:30
    },
    listBottom: {
        flexDirection: 'column',
        height: 44,
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'center',
    },
    wraps:{
        flexDirection: 'row',
        alignItems:'center',
        height: 44
    },
    dotStyle:{
        marginRight:4
    }

});